<template>
	<view class="container">
		<!-- 商品图片start -->
		<view class="swiper-item">
			<swiper indicator-dots="true" class="swiper" circular indicator-color="#BABABA"
				indicator-active-color="#6C64D0">
				<swiper-item v-for="( item,index) in imagelist" :key="item">
					<view @click="fangda(item)" :style="{'background-image': `url(${ item })`}"
						:class="['image','flex']"></view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 商品图片end -->


		<view class="section">
			<view class="section-item">
				<view class="des">
					<view class="flex space-between">
						<view class="name">{{ goodsname }}</view>
						<view v-if="type==1" class="value"><text
								style="color: #E81456;font-size: 40rpx">{{ money }}</text>金币</view>
						<view v-if="type==2" class="value"><text
								style="color: #E81456;font-size: 40rpx">{{ money }}</text>元</view>
					</view>
					<view class="line"></view>
					<view class="info">商品简介</view>
					<view class="jieshao">{{ goodsdetail }}</view>
					<view class="type-info">{{ goodstype }}</view>
					<view class="flex space-between distance">
						<view class="flex flex-justify-start">
							<image src="@/static/images/icon-location.png" class="icon-location" mode=""></image>
							{{address}}
						</view>
						<view class="loc flex " @click="gotoMap">
							<uni-icons type="location-filled" size="18" color="#4280CD"></uni-icons>
							<text>距你{{juli || 0}}km</text>
						</view>
					</view>
				</view>
				<view class="line mt0"></view>

				<view class="card">
					<!--					<view class="item flex spaace-between">-->
					<!--						<view class="key">商品类别:</view>-->
					<!--						<view class="value">{{goodstype}}</view>-->
					<!--					</view>-->
					<view class="item flex spaace-between">
						<view class="key">发布日期:</view>
						<view class="value">{{date}}</view>
					</view>
					<view class="item flex spaace-between">
						<view class="key">发布人:</view>
						<view class="value">{{nickname}}</view>
					</view>
					<!--          <checkbox-group @change="checkboxChange">-->
					<!--            <label>-->
					<!--              <checkbox value="valuecb" color="#534EA1" :checked="isChecked" style="transform:scale(0.6)"-->
					<!--                        @ch />-->
					<!--              我已阅读并同意-->
					<!--              <span class="agreeclass" >《售卖服务协议》《隐私协议》《数字证书使用协议》</span>-->
					<!--            </label>-->
					<!--          </checkbox-group>-->
				</view>
			</view>
		</view>

		<!--    <view class="info">售卖流程</view>-->
		<!--    <view class="info">商品展示</view>-->

		<view class="btn-box flex space-between w100 fixed">
			<view class="line"></view>
			<view class="btns flex flex-justify-start">
				<block v-if="!ismy">
					<block v-if="jubao_state==0">
						<view v-if="dealstate!=='dealcomplete'" class="icon flex" @click="saveCollect()"><uni-icons
								:type="shouid !== 0 ?'star-filled' : 'star'" size="20" color="#4280CD"></uni-icons>
							<view>收藏</view>
						</view>
						<view v-if="dealstate!=='dealcomplete'" class="icon flex" @click="modalVisible = true">
							<uni-icons type="info" size="20" color="#4280CD"></uni-icons>
							<view>举报</view>
						</view>
						<view v-if="dealstate==='onsale'" class="btn btn-save" @click="gtbtn">
							<text>我&nbsp;想&nbsp;要</text>
						</view>
					</block>
					<block v-if="jubao_state==1">
						<view class="btn btn-save disabled" @click="show_reson">
							<text>被&nbsp;举&nbsp;报&nbsp;受&nbsp;理&nbsp;中</text>
						</view>
					</block>
				</block>
				<block v-else>
					<block v-if="jubao_state==1">
						<view class="btn btn-save disabled" @click="show_reson">
							<text>被&nbsp;举&nbsp;报&nbsp;受&nbsp;理&nbsp;中</text>
						</view>
					</block>
					<block v-if="jubao_state==2">
						<view class="btn btn-save" @click="show_reson">
							<text>被&nbsp;举&nbsp;报&nbsp;强&nbsp;制&nbsp;下&nbsp;架</text>
						</view>

					</block>
					<block v-if="jubao_state==0">
						<block v-if="dealstate==='onsale'">
							<view class="btn btn-save" @click="xiajiaClick"><text>下&nbsp;架</text></view>
						</block>
						<block v-if="dealstate==='unsale'">
							<view class="btn btn-plain" @click="shangjiaClick"><text>上&nbsp;架</text></view>
							<view class="btn btn-save" @click="bianji"><text>编&nbsp;辑</text></view>
						</block>
					</block>
				</block>

			</view>
		</view>

		<view>
			<modal v-if="modalVisible" :showCancelButton="true" @cancel="modalVisible = false;reportContent = ''"
				@confirm="submitReport">
				<view class="slot-content">
					<input class="textarea" style="" cursor-spacing="15" :adjust-position="true" maxlength="50"
						v-model="reportContent" auto-height placeholder="请输入举报原因：(50字以内)" />
				</view>
			</modal>
		</view>
		<MyLogin v-if="showlogin" :showlogin.sync="showlogin"></MyLogin>
	</view>
</template>

<script>
	var self, mapCtx
	import QQMapWX from '../../utils/qqmap-wx-jssdk'
	import MyLogin from '@/components/my-login.vue'
	var qqmapsdk;

	export default {
		components: {
			MyLogin
		},
		data() {
			return {
				modalVisible: false,
				reportContent: '',
				isChecked: false,
				mediaUrl: uni.$http.mediaUrl,
				juli: '',
				goodsid: '',
				shouid: '',
				type: '',
				money: '',
				username: '',
				goodsname: '',
				goodsdetail: '',
				goodstype: '',
				jubao_reson: '', //举报原因
				jubao_state: '',
				imagelist: [],
				image: '',
				date: '',
				nickname: '',

				latitude: '',
				longitude: '',
				address: '',
				phonesale: '',

				userInfo: null,
				distance: '',
				ismy: false,

				dealid: '',
				dealstate: '',
				showlogin: false,
			};
		},
		onLoad(e) {
			// this.juli = e.juli
			this.goodsid = e.goodsid
			qqmapsdk = new QQMapWX({
				key: this.wemapkey
			});
		},
		onShow() {
			if (!uni.getStorageSync('is_active')) {
				uni.showToast({
					title: '该账号已被冻结，有疑问请联系客服',
					icon: 'none',
					duration: 2000
				})
				// setTimeout(() => {
				// 	uni.reLaunch({
				// 		url: '/pages/mine/mine'
				// 	})
				// }, 2000);
			}
			self = this
			this.dealid = this.realSystime()
			this.userInfo = uni.getStorageSync('userInfo')
			this.getMyInfo()
			// this.getMyOrderDetail()
			this.getGoodsDetail()
		},
		onPullDownRefresh(e) {
			console.log("上拉")

			this.getGoodsDetail();
		},
		methods: {
			async saveCollect() {
				// this.isCollect = !this.isCollect
				//todo 增加收藏/取消接收藏口 对应增加初始化查询用户是否收藏此商品逻辑
				const postmsg = {
					id: this.shouid,
					type: this.type,
					goodsid: this.goodsid,
					username: this.userInfo.username
				}
				const {
					data: res
				} = await uni.$http.post('addshou/', postmsg)
				if (res.code == 200) {
					this.shouid = res.id
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					})
					return true
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 2000
					})
					return false
				}
			},
			checkboxChange: function(e) {
				// console.log(1)
				this.isChecked = e.detail.value.length > 0
			},
			async myPub_updateDealstate(id, dealstate) {
				const postmsg = {
					goodsid: id,
					dealstate: dealstate
				}
				const {
					data: res
				} = await uni.$http.post('updateMyPubLish/', postmsg)
				if (res.code == 200) {
					// uni.showToast({
					// 	title: '操作成功',
					// 	icon: 'none',
					// 	duration: 1000
					// })
					this.dealstate = dealstate
					return true
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 2000
					})
					return false
				}
			},
			async xiajiaClick() {
				// const postmsg = { goodsid:this.goodsid }
				// const {data:res} = await uni.$http.post('getPubDealState/',postmsg)
				// if(res.status==200){
				// 	console.log('xiajiaClick---',res)
				// 	if (res.dealstate == 'onsale') {
				// console.log('订单状态：'+res.dealstate );
				// uni.showModal({
				//     title: '提示',
				//     content: '确定下架吗？',
				//     success: function (res) {
				//         if (res.confirm) {
				this.myPub_updateDealstate(this.goodsid, 'unsale').then((res) => {
					console.log(res)
					if (!res) {
						setTimeout(function() {

							uni.reLaunch({
								url: '/pages/mine/dealinfo?current=' + 0
							});
						}, 1000);
					}
				})

				//         } else if (res.cancel) {
				//             console.log('用户点击取消');
				//         }
				//     }
				// });
				// 	}else{
				// 		uni.showToast({ title: '不可下架', icon: 'none', duration: 1000 })
				// 		setTimeout(function () {

				// 			  uni.reLaunch({
				// 				url: '/pages/mine/dealinfo?current=' + 0
				// 			  });
				// 			}, 1000);
				// 	}
				// }else{
				// 	uni.showToast({ icon:'none', title: res.msg , duration: 1000})
				// }
			},
			show_reson() {

				uni.showModal({
					title: '被举报原因:',
					content: this.jubao_reson + "(有疑问请联系客服)",
					success: function success(res) {
						if (res.confirm) {
							// self.myPub_updateDealstate(self.goodsid, 'onsale');
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			async shangjiaClick() {
				// const postmsg = { goodsid:this.goodsid }
				// const {data:res} = await uni.$http.post('getPubDealState/',postmsg)
				// if(res.status==200){
				// 	console.log('xiajiaClick---',res)
				// 	if (res.dealstate == 'unsale') {
				// console.log('订单状态：'+res.dealstate );
				// uni.showModal({
				//     title: '提示',
				//     content: '确定上架吗？',
				//     success: function (res) {
				// if (res.confirm) {
				this.myPub_updateDealstate(this.goodsid, 'onsale').then((res) => {
					console.log(res)
					if (!res) {
						setTimeout(function() {

							uni.reLaunch({
								url: '/pages/mine/dealinfo?current=' + 0
							});
						}, 1000);
					}
				})
				// } else if (res.cancel) {
				//     console.log('用户点击取消');
				// }
				//     }
				// });
				// 	}else{
				// 		uni.showToast({ title: '不可上架', icon: 'none', duration: 1000 })
				// 	}
				// }else{
				// 	uni.showToast({ icon:'none', title: res.msg })
				// }
			},

			fangda(item) {
				console.log(item)
				// var imgUrl = e;
				wx.previewImage({
					urls: this.imagelist, //需要预览的图片http链接列表，注意是数组
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

			async getMyInfo() {
				// console.log('getMyInfo'+this.userInfo.username)
				const userInfo = {
					username: self.userInfo.username,
				}
				const {
					data: res
				} = await uni.$http.post('getMyInfo/', userInfo)
				if (res.code == 200) {
					// console.log(res)
					var coins = parseInt(res.data.coins)
					// if (coins < 1) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '金币不足，请多多分享物品~',
					// 		duration: 2000
					// 	})
					// }
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			async getGoodsDetail() {
				const postmsg = {
					goodsid: this.goodsid,
					userid: uni.getStorageSync('userid'),
				}
				const {
					data: res
				} = await uni.$http.post('getGoodsDetail/', postmsg)
				if (res.code == 200) {
					uni.stopPullDownRefresh(); //上拉停止刷新

					// console.log(res.goodsdetail)
					this.goodsid = res.data.goodsid
					this.shouid = res.data.shouid
					this.type = res.data.type
					this.money = res.data.money
					this.goodsname = res.data.goodsname
					this.goodsdetail = res.data.goodsdetail
					this.goodstype = res.data.goodstype
					// this.imagelist = res.data.imagelist.map((item) => `${ this.mediaUrl }${ item }`)
					this.imagelist = res.data.imagelist
					this.image = this.imagelist[0]
					this.date = res.data.date
					this.address = res.data.address
					this.juli = res.data.juli
					this.latitude = res.data.latitude
					this.longitude = res.data.longitude
					this.phonesale = res.data.phonesale
					this.jubao_state = res.data.jubao_state
					this.dealstate = res.data.dealstate
					this.jubao_reson = res.data.jubao_reson
					// this.nickname = unescape(res.data.nickname)
					this.nickname = res.data.nickname
					this.calculateDistance()
					if (this.phonesale == self.userInfo.username) {
						this.ismy = true
					}
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg
					})
				}
			},

			realSystime() {
				var now = new Date(); //创建Date对象
				var year = now.getFullYear(); //获取年份
				var month = now.getMonth() + 1; //获取月份
				var date = now.getDate(); //获取日期
				var day = now.getDay(); //获取星期
				var hour = now.getHours(); //获取小时
				var minu = now.getMinutes(); //获取分钟
				var sec = now.getSeconds(); //获取秒
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (date >= 0 && date <= 9) {
					date = "0" + date;
				}
				if (hour >= 0 && hour <= 9) {
					hour = "0" + hour;
				}
				if (minu >= 0 && minu <= 9) {
					minu = "0" + minu;
				}
				if (sec >= 0 && sec <= 9) {
					sec = "0" + sec;
				}
				var time = '' + year + month + date + hour + minu + sec;
				return time
			},
			calculateDistance() {
				// console.log(this.userInfo)
				var start = {
					latitude: this.userInfo.latitude,
					longitude: this.userInfo.longitude
				};
				var dest = [{
					latitude: parseFloat(this.latitude),
					longitude: parseFloat(this.longitude)
				}];
				// console.log(start,dest)
				qqmapsdk.calculateDistance({
					from: start,
					to: dest,
					success: function(res) {
						// console.log(res);
						var res = res.result;
						var dis = [];
						for (var i = 0; i < res.elements.length; i++) {
							dis.push(res.elements[i].distance); //将返回数据存入dis数组，
						}
						this.distance = dis / 1000
					},
					fail: function(error) {
						console.error(error);
					},
					complete: function(res) {
						// console.log(res);
					}
				});
			},

			gotoMap() {
				uni.navigateTo({
					url: '/pages/home/goodsmap?searchKey=' + this.goodsid
				})
			},

			// 拿到卖家的信息
			privateChat() {
				
				uni.navigateTo({
					url: '/pages/conversations/privateChat?id=' + this.phonesale 
						+'&goodsid=' + this.goodsid
				});
				
				
				// const userInfo = {
				// 	username: this.phonesale,
				// }
				// const {
				// 	data: res
				// } = await uni.$http.post('getMyInfo/', userInfo)
				// // console.log('privateChat----', this.phonesale, res.data.avatar)
				// if (res.code == 200) {
				// 	// uni.setStorageSync(this.phonesale, this.goodsid)
				// 	uni.navigateTo({
				// 		url: '/pages/conversations/privateChat?id=' + this.phonesale 
				// 		// + '&nickname=' +
				// 			// unescape(res.data.nickname) + '&avatar=' + this.mediaUrl + res.data.avatar +
				// 			// res.data.nickname + '&avatar=' + this.mediaUrl + res.data.avatar +
				// 			+'&goodsid=' + this.goodsid+
				// 			 // + '&goodsgt=' + 'goodsgt'
				// 	});
				// } else {
				// 	uni.showToast({
				// 		icon: 'error',
				// 		title: res.msg
				// 	})
				// }
			},
			bianji() {
				// this.getPubDealState()
				// if (this.dealstate == 'onsale') {
				// 先下架
				// this.myPub_updateDealstate(this.goodsid, 'unsale').then((res) => {
				// console.log(res)
				// if (res) {
				// 只有下架了才能看到编辑按钮,所以此处不需要在做状态判断
				// 携带参数到发布页面
				uni.navigateTo({
					url: '/pages/home/btnpublish?goodsid=' + this.goodsid
				})
				// 	}
				// })


				// } else {
				// 	uni.showToast({
				// 		icon: 'error',
				// 		title: "请稍后重试~",
				// 		duration: 1000
				// 	});

				// 	setTimeout(function() {
				// 		uni.reLaunch({
				// 			url: '/pages/mine/dealinfo?current=' + 0
				// 		});
				// 	}, 1000);

				// }

			},
			jubao() {
				if (!uni.getStorageSync('hasLogin')) {
					this.showlogin = true;
					return
				}
				uni.showModal({
					editable: true, //显示输入框
					placeholderText: '请输入举报原因', //显示输入框提示信息
					success: function(ress) {
						if (ress.confirm) { //点击了确认
							// console.log(ress.content)
							if (ress.content == null || ress.content == '') {
								uni.showToast({
									icon: 'error',
									title: '请输入原因',
									duration: 1000
								});
								self.reopenModal(); // 重新打开输入弹窗
							} else if (ress.content.length > 50) {
								uni.showToast({
									icon: 'error',
									title: '请保持在50字以内',
									duration: 1000
								});
								self.reopenModal(); // 重新打开输入弹窗
							} else {
								ress.content = ress.content.replace(
									/[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]/g, '')
								self.jubaook(ress.content);
							}


						} else {
							console.log('用户点击了取消')
						}
					}
				})
			},
			submitReport() {
				if (!uni.getStorageSync('hasLogin')) {
					this.showlogin = true;
					return
				}
				if (this.reportContent === '') {
					uni.showToast({
						icon: 'error',
						title: '请输入原因',
						duration: 1000
					});
				} else if (this.reportContent.length > 50) {
					uni.showToast({
						icon: 'error',
						title: '请保持在50字以内',
						duration: 1000
					});
				} else {
					this.reportContent = this.reportContent.replace(
						/[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]/g, '');
					this.jubaook(this.reportContent);
					// 关闭弹窗
					this.modalVisible = false;
				}
			},
			async jubaook(reson) {

				console.log(reson)
				const postmsg = {
					goodsid: self.goodsid,
					username: self.userInfo.username,
					jubao_reson: reson
				}
				const {
					data: res
				} = await uni.$http.post('jubao/', postmsg);
				console.log(res)
				if (res.code == 200) {
					uni.showToast({
						icon: 'success',
						title: '举报成功~',
						duration: 1000
					});
					// 举报完成后直接进入首页
					//并且给双方发送站内消息
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/home/home'
						});
					}, 1000);
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/home/home'
						});
					}, 2000);
				}
				this.reportContent = ''
			},
			async gtbtn() {
				//这个还是有用了，可以拦截无效的聊天
				this.getMyOrderDetail()
				// console.log(this.dealstate)

				if (uni.getStorageSync('hasLogin')) {
					if (this.dealstate != 'onsale') {
						// console.log("抱歉您来晚一步")
						uni.showToast({
							icon: 'error',
							title: '抱歉您来晚一步',
							duration: 1000
						});
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/home/home'
							});
						}, 2000);
					} else {


						if (this.goEasy.getConnectionStatus() === 'disconnected') {
							// this.connectGoEasy();  //连接goeasy
							// this.subscribeGroup(); //建立连接后，就应该订阅群聊消息，避免漏掉
							uni.showLoading();
							this.goEasy.connect({
								id: self.userInfo.username,
								data: {
									name: this.userInfo.nickname,
									avatar: this.userInfo.avatar
								},
								onSuccess: () => {
									console.log('GoEasy connect successfully.')
									uni.hideLoading();
									this.privateChat()
								},
								onFailed: (error) => {
									console.log('Failed to connect GoEasy, code:' + error.code +
										',error:' + error.content);
								},
								onProgress: (attempts) => {
									console.log('GoEasy is connecting', attempts);
								}
							});
						} else {
							this.privateChat()
						}
					}
				} else {
					this.showlogin = true
				}


			},

			async getMyOrderDetail() {
				this.myOrderList = []
				const postmsg = {
					goodsid: this.goodsid,
					phonebuy: self.userInfo.username,
				}
				const {
					data: res
				} = await uni.$http.post('getMyOrderDetail/', postmsg)
				if (res.code == 200) {
					this.dealstate = res.data
				}
			},
			// async xybtn() {
			// 	if (uni.getStorageSync('hasLogin')) {
			// 		const postmsg = {
			// 			goodsid: this.goodsid,
			// 			goodsname: this.goodsname,
			// 			goodsdetail: this.goodsdetail,
			// 			image: this.image,
			// 			phonesale: this.phonesale,
			// 			phonebuy: self.userInfo.username,
			// 			namebuy: this.userInfo.nickname,
			// 		}
			// 		const {
			// 			data: res
			// 		} = await uni.$http.post('geneOrder/', postmsg)
			// 		if (res.status == 200) {
			// 			uni.showToast({
			// 				icon: 'success',
			// 				title: '下单成功',
			// 				duration: 1000
			// 			})
			// 			uni.navigateTo({
			// 				url: '/pages/mine/dealinfo?current=' + 1
			// 			})
			// 		} else if (res.status == 400) {
			// 			uni.showToast({
			// 				icon: 'none',
			// 				title: res.msg,
			// 				duration: 2000
			// 			})
			// 		} else {
			// 			console.log(res.msg);
			// 		}
			// 	} else {
			// 		this.showlogin = true
			// 	}

			// },
			// async xyzbtn() {
			// 	// uni.showToast({ icon: 'success', title: '已在交易中',duration:1000 })
			// 	if (uni.getStorageSync('hasLogin')) {
			// 		if (this.goEasy.getConnectionStatus() === 'disconnected') {
			// 			// this.connectGoEasy();  //连接goeasy
			// 			// this.subscribeGroup(); //建立连接后，就应该订阅群聊消息，避免漏掉
			// 			uni.showLoading();
			// 			this.goEasy.connect({
			// 				id: self.userInfo.username,
			// 				data: {
			// 					name: this.userInfo.nickname,
			// 					avatar: this.mediaUrl + this.userInfo.avatar
			// 				},
			// 				onSuccess: () => {
			// 					console.log('GoEasy connect successfully.')
			// 					uni.hideLoading();
			// 					this.privateChat()
			// 				},
			// 				onFailed: (error) => {
			// 					console.log('Failed to connect GoEasy, code:' + error.code + ',error:' +
			// 						error.content);
			// 				},
			// 				onProgress: (attempts) => {
			// 					console.log('GoEasy is connecting', attempts);
			// 				}
			// 			});
			// 		} else {
			// 			this.privateChat()
			// 		}
			// 	} else {
			// 		this.showlogin = true
			// 	}
			// },
			ismybtn() {
				uni.showToast({
					icon: 'success',
					title: '老板，这是你的',
					duration: 1000
				})
			}
		},
	}
</script>

<style lang="scss">
	.key {
		color: black;
		// font-size: 28rpx;
	}

	page {
		background-color: #fff;
	}

	.textarea {
		border: 1px solid #ccc;
		min-height: 150rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.jieshao {
		color: #000;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.container {
		padding: 0 !important;
	}

	.line {
		height: 1rpx;
		background: rgb(233, 235, 254);
		margin-top: 20rpx;
	}

	.mt0 {
		margin-top: 0;
	}

	.des {
		padding-top: 20rpx;

		.name {
			font-size: 32rpx;
			color: rgb(49, 49, 49);
			font-weight: bold;
		}

		.value {
			color: #8678CB;
			font-size: 28rpx;

			text {
				color: #DC4A68;
			}
		}
	}

	.info {
		width: 110rpx;
		color: #fff;
		font-size: 24rpx;
		margin-top: 20rpx;
		border-radius: 8rpx;
		background: rgb(208, 212, 241);
		padding: 6rpx 15rpx;
		text-align: center;
	}

	.image-item {
		margin-bottom: 100rpx;
	}

	.type-info {
		display: inline-block;
		color: #7780C8;
		padding: 5rpx 25rpx;
		margin-top: 20rpx;
		font-size: 24rpx;
		border-radius: 28rpx;
		background: rgb(233, 235, 254);
	}

	.distance {
		font-size: 24rpx;
		color: #888889;
		padding: 20rpx 0;

	}

	.loc {
		color: #4280CD;
	}

	.icon-location {
		width: 18rpx;
		height: 21rpx;
		margin-right: 10rpx;
	}


	.card {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #A5A5B2;

		.item {
			background-color: #F8F8FF;
			border-radius: 16rpx;
			padding: 10rpx 32rpx;
			margin-bottom: 16rpx;

			.value {
				color: #A5A5B2;
			}
		}

		.agreeclass {
			color: #4280CD;
		}
	}

	.swiper-item {
		.swiper {
			height: 500rpx;
			background-color: #6C64D0
		}

		.image {
			background-position: center;
			background-repeat: no-repeat;
			// background-size: 100% 100%;
			border-radius: 30px 30px 0px 0px;
			height: 100%;
			background-color: #6C64D0;
		}
	}

	// 商品详情里面轮播图指示灯位置
	/deep/wx-swiper .wx-swiper-dot {
		position: relative;
		bottom: 10rpx;
	}

	.btn-box {
		margin-bottom: 0;
		// border-top: 1px solid #BFC4F2;
		padding: 8rpx 30rpx 40rpx 30rpx;
	}

	.btns {
		flex: 1;

		.icon {
			color: #4280CD;
			font-size: 28rpx;
			margin-right: 40rpx;

			text {
				margin-left: 5rpx;
			}
		}

		.btn {
			// min-width:220rpx;
			margin-left: 50rpx;
			margin-right: 20rpx;
			border-radius: 20rpx;
			line-height: 80rpx;
			flex: 1;

			&.btn-save {
				background: #7780C8;

				&.disabled {
					background: rgba(83, 78, 161, .6)
				}

			}

		}
	}
</style>